<!doctype html>
<html>
    <head>
        
        <title>jsPlumb 1.5.5 demo - YUI3</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />		
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" href="../demo-all.css">		
        <link rel="stylesheet" href="demo.css">        
    </head>
    <body data-demo-id="sourcesAndTargets" data-library="yui">
        <div id="headerWrapper">
            <div id="header">
                <div class="logo"><img src="../../logo-bw.png"></div>
                <div class="menu">   
                    <a href="http://localhost:4567">DOCS</a>
                    <a href="../../apidocs/">API</a>
                    <a href="../../tests/all-tests.html">TESTS</a>
                    <a href="mailto:hello@jsplumbtoolkit.com">CONTACT</a>
                    <a href="http://github.com/sporritt/jsplumb/">GITHUB</a>
                    <a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb">DISCUSS</a>
                    <a href="https://github.com/sporritt/jsPlumb/issues">ISSUES</a>
                </div>
            </div>
        </div>    

        <iframe id="like" src="http://www.facebook.com/widgets/like.php?href=http://jsplumb.com&amp;layout=button_count"></iframe>

        <div id="retweet_button">
            <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsplumb.org" data-text="jsPlumb - visually connect DOM elements." data-count="horizontal" data-via="jsPlumb">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </div>
		
        <div id="main">			          

            <div class="explanation">
                <h4>SOURCES &amp; TARGETS</h4>                    
                <p>Drag Connections from the blue element to any of the green ones. You can also drag existing
                    Connections from one green element to another - Connections are, by default, detachable (this behaviour can be overridden).</p>
                <p>The <strong>makeSource</strong> and <strong>makeTarget</strong>functions provide an alternative means of setting up your UI to support draggable connections - here we treat entire
                elements as sources and targets, and only when Connections are established do we assign Endpoints for them.</p>
                <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor locations.</p>          
                <p>
                The `disable` link is excluded from being a drag source through the use of the `filter` parameter on the makeSource call.
                </p>
                <p>The green elements are configured as Connection targets, with a `Top` anchor, and are draggable</p>
                <p>This demonstration uses YUI 3.3.0.</p>
            </div>                  
            <div class="demo source-target-demo" id="source-target-demo">
                <div class="window" id="sourceWindow1">           
                    <strong>Window 1</strong>
                    <a href="#" id="enableDisableSource">disable</a>                
                </div>
                <div class="window smallWindow" id="targetWindow2"><strong>Window 2</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow3"><strong>Window 3</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow4"><strong>Window 4</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow5"><strong>Window 5</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow6"><strong>Window 6</strong><br/><br/></div>
            </div>
        </div>
	
        <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
				
		<!-- JS -->
		<!-- support lib for bezier stuff -->
		<script src="../../lib/jsBezier-0.6.js"></script>     
        <!-- jsplumb geom functions -->   
        <script src="../../lib/jsplumb-geom-0.1.js"></script>
		<!-- jsplumb util -->
		<script src="../../src/util.js"></script>
        <!-- base DOM adapter -->
		<script src="../../src/dom-adapter.js"></script>        
		<!-- main jsplumb engine -->
		<script src="../../src/jsPlumb.js"></script>
        <!-- endpoint -->
		<script src="../../src/endpoint.js"></script>                
        <!-- connection -->
		<script src="../../src/connection.js"></script>
        <!-- anchors -->
		<script src="../../src/anchors.js"></script>        
		<!-- connectors, endpoint and overlays  -->
		<script src="../../src/defaults.js"></script>
        <!-- bezier connectors -->
        <script src="../../src/connectors-bezier.js"></script>
		<!-- state machine connectors -->
		<script src="../../src/connectors-statemachine.js"></script>
        <!-- flowchart connectors -->
		<script src="../../src/connectors-flowchart.js"></script>
        <script src="../../src/connector-editors.js"></script>
		<!-- SVG renderer -->
		<script src="../../src/renderers-svg.js"></script>
		<!-- canvas renderer -->
		<script src="../../src/renderers-canvas.js"></script>
		<!-- vml renderer -->
		<script src="../../src/renderers-vml.js"></script>
        
        <!-- yui jsPlumb adapter -->
		<script src="../../src/yui.jsPlumb.js"></script>
		<!-- /JS -->
		
		<!--  demo code -->
		<script src="demo.js"></script>

        <script src="../demo-list.js"></script>
        
    </body>
</html>